// import { useState, useEffect } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import '../assets/scss/menus.scss'

function Menus(): JSX.Element {

  const location = useLocation()
  const routerName = () => {
    // console.log(location.pathname)
    return location.pathname
  }

  // 左侧菜单
  const menu: any = sessionStorage.getItem('menu')
  const leftMenu = JSON.parse(menu).filter((item: any) => item.pid === 0 && item.postion === "left")
  // console.log(leftMenu);

  const navigate = useNavigate()
  type MenuItem = Required<MenuProps>['items'][number];
  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }

  const items: MenuProps['items'] = leftMenu.map((item: any) =>
    getItem(item.name, item.url, <i className={`iconfont ${item.ico}`}></i>),
  )

  const menuClick: MenuProps['onClick'] = (e) => {
    // console.log('menuClick ', e.key);
    navigate(`/home${e.key}`)
  };

  let arrKeys: string[] = []
  const res = () => {
    arrKeys.push(routerName().substring(5))
  }
  res()
  // console.log(arrKeys);

  return (
    <Menu
      className="left-menus"
      onClick={menuClick}
      style={{ width: '100%', background: 'transparency' }}
      mode="inline"
      items={items}
      selectedKeys={arrKeys}
    />
  );
}

export default Menus;